import React, { useState, useEffect } from 'react';
import { Form, Input, Button, message } from 'antd';
import { size } from 'lodash';
import { useRequest } from '@/hooks';
import { checkAccountNameEmail, sendVerificationCode } from '@/pages/EntryManage/services';
import { history } from 'umi'
import MailAutoComplete from './MailAutoComplete';

const organizeType = 1; // 1是oa

// 重置密码表单
const ResetForm = ({ form, name, email, redirectId }) => {
    const { getFieldDecorator } = form;
    const [disabled, setDisabled] = useState(true);

    // 校验账号是否存在
    const { loading, run } = useRequest(params => checkAccountNameEmail(params), {
        manual: true
    });

    // 发送验证码
    const { loading: sendCodeLoading, run: runSendCode } = useRequest(params => sendVerificationCode(params), {
        manual: true
    });

    // 按钮是否disabled状态
    useEffect(() => {
        const values = form.getFieldsValue();
        const arr = Object.values(values).filter(item => !item || item === '');
        let hasError = false;
        Object.keys(values).forEach(item => {
            if (size(form.getFieldError(item)) > 0) {
                hasError = true;
            }
        });
        setDisabled(hasError || size(arr) > 0);
    }, [form]);

    const handleSubmit = () => {
        form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                const { code, msg } = (await run({ ...values, organizeType })) || {};
                if (code === 10000) {
                    const res = await runSendCode({
                        loginName: values?.email,
                        organizeType,
                        type: 10,
                        redirectId
                    });
                    if (res?.code === 10000) {
                        history.push({
                            pathname: '/external/interview/resetPassword',
                            query: { step: 2, name: values?.name, email: values?.email, id: redirectId }
                        });
                    } else {
                        message.error(res?.msg);
                    }
                } else {
                    message.error(msg);
                }
            }
        });
    };

    return (
        <Form hideRequiredMark>
            <Form.Item label={<span style={{ fontSize: 16 }}>姓名</span>}>
                {getFieldDecorator('name', {
                    initialValue: name,
                    rules: [
                        {
                            required: true,
                            message: '请输入'
                        }
                    ]
                })(<Input placeholder="请输入" size="large" allowClear />)}
            </Form.Item>
            <Form.Item label={<span style={{ fontSize: 16 }}>邮箱</span>}>
                {getFieldDecorator('email', {
                    initialValue: email,
                    rules: [
                        {
                            required: true,
                            message: '请输入'
                        },
                        {
                            type: 'email',
                            message: '请输入正确格式的邮箱！'
                        }
                    ]
                })(<MailAutoComplete placeholder="请输入您应聘时预留的邮箱" size="large" allowClear />)}
            </Form.Item>
            <Form.Item style={{ textAlign: 'center', paddingTop: 12 }}>
                <Button
                    disabled={disabled}
                    loading={loading || sendCodeLoading}
                    block
                    type="primary"
                    size="large"
                    onClick={handleSubmit}
                >
                    下一步
                </Button>
            </Form.Item>
        </Form>
    );
};

export default Form.create()(ResetForm);
